<template>
  <div class="my-navbar"
      :class="{ 'my-navbar-top': $props.position ==='top','my-navbar-bottom': $props.position ==='bottom'}">
      <!-- 可以用特殊变量 $event 把原生 DOM 事件传入方法 -->
    <div v-for="n in titles" class="my-navbar-item" @click="btnClick(n, $event)">
      <div class="col-sm-4 col-xs-12 my-navbar-item-icon-area">
        <span class="my-navbar-item-icon-container">
          <img :src="n.icon" class="img-circle my-navbar-item-icon"/>
          <span v-if="n.id === 3 && addToCartCount > 0" 
             class="my-navbar-item-badge" :class="{'my-navbar-item-badge-tita':isTiTa}"><!-- 状态过渡动画：1.2通过isTiTa来控制对tita动画class的增删-->
            {{ addToCartCount }}
          </span>
        </span>
        <p class="visible-xs">{{ n.name }}</p>
      </div>
      <div class="col-sm-8 hidden-xs my-navbar-item-common">
        <div class="my-navbar-item-common-title">{{ n.name }}</div>
        <div class="ellipsis-text">{{ n.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import icons from '../resx/Icons'

export default {
  data () {
    return {
      product_types: [
        {id: 11, name: '推荐', desc: '精品，优秀新品', icon: icons.tj, path: '/Home/0', count: 0},
        {id: 12, name: '书籍', desc: '文学、IT、哲学....', icon: icons.book, path: '/Home/4', count: 0},
        {id: 13, name: '生鲜', desc: '水果、蔬菜、肉类...', icon: icons.sx, path: '/Home/3', count: 0},
        {id: 14, name: '家电', desc: '冰箱、彩电、电脑...', icon: icons.jd, path: '/Home/1', count: 0},
        {id: 15, name: '服装', desc: '上衣、裤子、裙子...', icon: icons.fz, path: '/Home/2', count: 0}
      ],
      functions: [
        {id: 1, name: '主页', desc: '购物主页，商品选择', icon: icons.home, path: '/Home/0', count: 0},
        {id: 2, name: '圈子', desc: '购物分享....', icon: icons.friedsCricle, path: '/FriendsCricle', count: 0},
        {id: 5, name: '会员', desc: '够潮你就来....', icon: icons.VIP, path: '/VIP', count: 0},
        {id: 3, name: '购物车', desc: '等待下单...', icon: icons.shoppingCart, path: '/ShoppingCart', count: 4},
        {id: 4, name: '我的', desc: '我的订单、钱包...', icon: icons.my, path: '/My', count: 0}
      ],
      // 状态过渡动画：1.1通过isTiTa来控制对tita动画class的增删
      isTiTa: false
    }
  },
  watch: {
    // 状态过渡动画：2.监听状态
    addToCartCount (newValue, oldValue) {
      if (!this.isTiTa) {
        this.isTiTa = true
        // 状态过渡动画：3.动画完成之后，通过设置isTiTa=false删除tita动画class
        // 3.1 实现方式1  箭头函数中可以直接使用this
        setTimeout(() => {
          this.isTiTa = false
          return this.isTiTa
        }, 500)
      }

      // 状态过渡动画：3.动画完成之后，通过设置isTiTa=false删除tita动画class
      // 3.2 实现方式2  常规函数中的this将指向window对象，因此使用self变量避免this冲突
      // let self = this
      // setTimeout(function () {
      //   self.isTiTa = false
      // }, 500)
    }
  },
  computed: {
    titles () {
      return this.$props.position === 'top' ? this.product_types : this.functions
    },
    // addToCartCount实现方法1
    // addToCartCount () {
    //   // 此处获取state时需要指定模块名cart
    //   return this.$store.state.cart.addedCount
    // },
    ...mapGetters({
      // addToCartCount实现方法2，此处未使用命名空间的情况下不需要指定模块名cart
      addToCartCount: 'productsCountInCart'
    })
  },
  props: {
    // 导航栏的位置，top:固定在顶部，bottom:固定在底部
    position: {
      type: String,
      default: 'top'
    }
  },
  methods: {
    btnClick (item, event) {
      this.$router.push({ path: item.path })
    }
  }
}
</script>

<style scoped>
.my-navbar{  
  /* 调整bootstrap .row 的margin-left: -15px; */
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  width: 100%;
  background-color: #eee;
}

.my-navbar-top{ 
  top: 0; 
}
.my-navbar-bottom{  
  bottom: 0;
}
.my-navbar-item{
  float: left;
  width: 20%;
}

.my-navbar-item-icon-container {
  position: relative;
}


.my-navbar-item-icon-container:hover {
  left: -2px;
  top: -4px;
}


.my-navbar-item-badge {
  position: absolute;
  top: -15px;
  right: -10px;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: red;
  border-radius: 10px;
}

.my-navbar-item-badge-tita {  
  animation:tita .5s;
}

  @keyframes tita
  {
    0% {right: -12px;}   
    25% {right: -8px;}
    50% {right: -12px;}   
    75% {right: -8px;}
    100% {right: -10px;}
  }

.my-navbar-item-icon-area{
  /* 调整bootstrap col样式 */
  padding: 0px;
  text-align: center;
}

.my-navbar-item-icon{
  height:50px;
}

.my-navbar-item-common{
  padding:5px;
}

.my-navbar-item-common-title{
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
}
</style>